const { defineConfig } = require('@vue/cli-service')
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
// 按需引入Vant组件及样式
const { VantResolver } = require('@vant/auto-import-resolver') // 自动引入对应组件的样式
const ComponentsPlugin = require('unplugin-vue-components/webpack') // 解析模板并自动注册对应的组件
// 引入打包分析差劲啊
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// 引入压缩插件 但是导致项目启动的比较慢
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = defineConfig({
  transpileDependencies: true,
  outputDir: 'dist', // 生产环境构建打包文件的目录
  assetsDir: 'static', // outputDir的静态资源(js、css、img、fonts)目录
  lintOnSave: false, // eslint检测
  productionSourceMap: false, // 生产环境的source Map，设置false可加速构建
  devServer: {
    https: false, // 链接是否使用https访问 但可能在微信中不能打开（安全性问题） 不写此行配置默认 使用http协议打开
    hot: true, // 用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）
    port: 9527,
    open: true // 是否运行好直接在默认浏览器打开
  },
  /**简单配置方式，该对象将会被 webpack-merge 合并入最终的 webpack 配置。 */
  configureWebpack: config => {
    config.plugins.push(
      ComponentsPlugin({
        resolvers: [VantResolver()]
      })
    )
    if (process.env.NODE_ENV === 'production') {
      /**js压缩 */
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            uglifyOptions: {
              compress: {
                drop_debugger: true,
                drop_console: true // 生产环境自动删除console
              },
              warnings: false
            },
            sourceMap: false,
            parallel: true // 使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1
          }
        })
      )
    } else {
      // 开发环境开发打包分析
      config.plugins.push(new BundleAnalyzerPlugin())
    }
  },
  /* 对内部的 webpack 配置（比如修改、增加Loader选项）(链式操作) */
  chainWebpack: config => {
    // 设置路径别名
    config.resolve.alias.set('@', resolve('src'))
    // 修改Loader选项
    // config.module
    //   .rule('vue')
    //   .use('vue-loader')
    //   .tap(options => {
    //     // 修改它的选项...
    //     return options
    //   })
  },
  css: {
    extract: false, //是否使用css分离插件 ExtractTextPlugin,设置true将打包多出一个css文件夹及css文件
    sourceMap: true,
    // 向所有 Sass/Less 样式传入共享的全局变量
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/styles/global.scss";`
      }
    }
  },
  /* 第三方插件配置 */
  pluginOptions: {}
})
